<template>
  <div>
    <div style="box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    width:90vn" ref="gsBox">
    <div class="codetext">table表格</div>
    
    <div style="padding:8px 10px;">
      <gs-button style="padding:8px 10px;" @click="click" type="warning">新增</gs-button>
      <gsTable  :tableHead="tableHead" :tableData="tableData" :height="'410px'" summary gsStyle="warning" />
    </div>
    <!-- <div class="codetext">淡出动画</div>
    <div style="padding:8px 10px;">
      <gsTable2  :tableHead="tableHead2" :tableData="tableData2" :height="'410px'" summary gsStyle="warning" />
    </div> -->
 
    <!--  -->
    <pre class="code">
      <span class="codetitle">使用height定义高度</span>
      <span class="codetitle">使用gsStyle定义风格一共八种风格 dark,primary, success, warning, danger, info,round,while</span>
      <span class="codetitle">使用trends定义动画效果</span>
      <span class="codetitle">使用summary定义是否合计</span>
      <span class="codetitle">支持上下左右按键移动光标</span>
      <span class="codetitle">tableHead:如果有自定义template优先渲染自定义template</span>
      <span class="codetitle">tableHead:如果不定义width，默认最长字符串宽度</span>
      <span class="codetitle">tableHead:type为渲染单元格组件,共有,input,date,select,button</span>
      <span class="codetitle">tableHead:align属性左left,中center,右right</span>
      <span class="codetitle">tableHead:summary当前列是否合计</span>
      <span class="codetitle">tableHead:如果type为input,format:定义为字符串text,数字number或富文本</span>
      <span class="codetitle">tableHead:如果type为button:circle圆形,size大小,btnType风格,icon按钮图标</span>

      <gs-code title="gs-gsTable" attr=':tableHead="tableHead2" :tableData="tableData2" :height="410px" summary gsStyle="warning"'></gs-code>

      tableHead :{{tableHead}}
    </pre>
    </div>
  </div>
</template>
<script>
import gsTable from "../components/table/tableS";
import gsButton from "../components/button/button";
import gsCode from "./code";
export default {
  name: 'vSelect',
  components: {
    gsCode,
    gsTable,
    gsButton
  },
  data(){
    return {
      tableHead: [
        {
          name: "项目",
          value: "xm",
          template:
            "<input v-gsFocus2 class='input td-div' v-model.trim='item.xm'></input>",
        },
        {
          name: "供应商",
          value: "parid",
          width: "220px",
          type: "input",
          format: "inputButton",
          icon: "iconfont iconsearch",
        },
        {
          name: "状态",
          value: "stat",
          width: "150px",
          type: "input",
          format: "text",
        },
        {
          name: "价格",
          value: "price",
          align: "right",
          summary: true,
          type: "input",
          format: "number",
        },
        {
          name: "制单人",
          value: "opt",
          type: "select",
          options: [
            { name: "张三", value: "001" },
            { name: "李四", value: "002" },
            { name: "韭菜", value: "003" },
          ],
          disabled: (index) => {
            if (index == 1) return true;
          },
        },
        { name: "制单日期", value: "billdate", type: "date" },
        // { name: "商品编号", value: "gdno" },
        // { name: "商品名称", value: "gdname" },
        {
          name: "删除",
          value: "button",
          type: "button",
          circle: true,
          size: "mini",
          btnType: "warning",
          icon: "iconfont iconsearch",
          disabled: (index) => {
            if (index == 1) return true;
          },
        },
        // { name: "规格", value: "standard" },
        // { name: "dd", value: "dd" },

      ],
      tableData: [
        {
          xm: "中文",
          parid: "阿萨德",
          opt: "张三",
          stat: "生效",
          price: 1,
          billdate: "2020-10-02",
          gdno: "000001",
          gdname: "拉面",
          standard: "10*0.3g",
          ss: "ss",
          dd: "dd",
          ee: "ee",
          zzzz: "asdasdasda",
          xxxx: "xxxx",
          cccc: "cccc",
          vvvv: "vvvv",
          bbbb: "bbbb",
          nnnn: "nnnn",
        },
        {
          xm: "英文",
          parid: "三宅一生",
          opt: "002",
          stat: "生效",
          price: 1,
          billdate: "",
          gdno: "000001",
          gdname: "臊子面",
          standard: "10*0.3g",
          ss: "ss",
          dd: "dd",
          ee: "ee",
          zzzz: "asdasdasda",
          xxxx: "xxxx",
          cccc: "cccc",
          vvvv: "vvvv",
          bbbb: "bbbb",
          nnnn: "nnnn",
        },
        {
          xm: "德文",
          parid: "阿萨德333",
          opt: "003",
          stat: "生效",
          price: 1,
          billdate: "2020-10-02",
          gdno: "000001",
          gdname: "油泼面",
          standard: "10*0.3g",
          ss: "ss",
          dd: "dd",
          ee: "ee",
          zzzz: "asdasdasda",
          xxxx: "xxxx",
          cccc: "cccc",
          vvvv: "vvvv",
          bbbb: "bbbb",
          nnnn: "nnnn",
        },
      ],

      tableHead2: [
        {
          name: "项目",
          value: "xm",
          template:
            "<input v-gsFocus class='input td-div' v-model.trim='item.xm'></input>",
        },
        {
          name: "供应商",
          value: "parid",
          width: "220px",
          type: "input",
          format: "inputButton",
          icon: "iconfont iconsearch",
        },
        {
          name: "状态",
          value: "stat",
          width: "150px",
          type: "input",
          format: "text",
        },
        {
          name: "价格",
          value: "price",
          align: "right",
          summary: true,
          type: "input",
          format: "number",
        },
        {
          name: "制单人",
          value: "opt",
          type: "select",
          options: [
            { name: "张三", value: "001" },
            { name: "李四", value: "002" },
            { name: "韭菜", value: "003" },
          ],
          disabled: (index) => {
            if (index == 1) return true;
          },
        },
        { name: "制单日期", value: "billdate", type: "date" },
        // { name: "商品编号", value: "gdno" },
        // { name: "商品名称", value: "gdname" },
        {
          name: "删除",
          value: "button",
          type: "button",
          circle: true,
          size: "mini",
          btnType: "warning",
          icon: "iconfont iconsearch",
          disabled: (index) => {
            if (index == 1) return true;
          },
        },
        // { name: "规格", value: "standard" },
        // { name: "dd", value: "dd" },

      ],
      tableData2: [
        {
          xm: "中文",
          parid: "阿萨德",
          opt: "张三",
          stat: "生效",
          price: 1,
          billdate: "2020-10-02",
          gdno: "000001",
          gdname: "拉面",
          standard: "10*0.3g",
          ss: "ss",
          dd: "dd",
          ee: "ee",
          zzzz: "asdasdasda",
          xxxx: "xxxx",
          cccc: "cccc",
          vvvv: "vvvv",
          bbbb: "bbbb",
          nnnn: "nnnn",
        },
        {
          xm: "英文",
          parid: "三宅一生",
          opt: "002",
          stat: "生效",
          price: 1,
          billdate: "",
          gdno: "000001",
          gdname: "臊子面",
          standard: "10*0.3g",
          ss: "ss",
          dd: "dd",
          ee: "ee",
          zzzz: "asdasdasda",
          xxxx: "xxxx",
          cccc: "cccc",
          vvvv: "vvvv",
          bbbb: "bbbb",
          nnnn: "nnnn",
        },
        {
          xm: "德文",
          parid: "阿萨德333",
          opt: "003",
          stat: "生效",
          price: 1,
          billdate: "2020-10-02",
          gdno: "000001",
          gdname: "油泼面",
          standard: "10*0.3g",
          ss: "ss",
          dd: "dd",
          ee: "ee",
          zzzz: "asdasdasda",
          xxxx: "xxxx",
          cccc: "cccc",
          vvvv: "vvvv",
          bbbb: "bbbb",
          nnnn: "nnnn",
        },
      ],
    }
  },
  methods:{
    click(){
      this.tableData.push({})
    },
  },
}
</script>
